<template>
  <basic-dialog
    v-model:loading="loading"
    :width="540"
    title="Log into Spaceship"
    :visible="visible"
    :auto-height="true"
    :show-header="false"
    :show-body="false"
    @handle-confirm="handleConfirm"
    @close="handleClose"
    @open="handleAdjustOpen"
  >
    <el-form
      size="large"
      :model="formState"
      class="login-form"
      label-position="top"
    >
      <h1 class="login-form__title">
        <span>{{ $t('login.tips.tip') }}域名{{ $t('login.tips.tip1') }}</span>
        <basic-icon name="plus" size="20px" @click="handleClose"></basic-icon>
      </h1>
      <el-form-item :label="$t('login.tips.tip4')">
        <el-input
          v-model.trim="formState.account"
          :placeholder="$t('login.rules.account')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('login.tips.tip5')" class="mb-0">
        <el-input
          v-model.trim="formState.password"
          :placeholder="$t('login.rules.password')"
          type="password"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item>
        <div class="login-form__forget">
          <el-link :underline="false" class="font-normal" type="primary"
            >{{ $t('login.tips.tip6') }}?</el-link
          >
        </div>
      </el-form-item>
      <el-form-item :label="$t('login.tips.tip7')">
        <el-input
          v-model.trim="formState.email"
          :placeholder="$t('login.rules.email')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('login.tips.tip8')" class="mb-[62px]">
        <el-input
          v-model.trim="formState.code"
          :maxlength="6"
          :placeholder="$t('login.rules.code')"
        >
          <template #suffix>
            <el-link
              type="primary"
              :underline="false"
              class="text-[14px] font-normal select-none"
              >{{ $t('login.tips.tip9') }}</el-link
            >
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="login-form__submit"
          :loading="loading"
          @click="handleSubmit"
          >{{ $t('login.tips.tip10') }}</el-button
        >
      </el-form-item>
      <div class="tips-text">
        <span class="inline-block">{{ $t('login.tips.tip11') }}</span>
        <el-link :underline="false" class="text-[12px]" type="primary">{{
          $t('login.tips.tip12')
        }}</el-link>
      </div>
    </el-form>
  </basic-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { omit } from 'lodash-es'

interface IProps {
  visible: boolean
}
interface IEmit {
  (event: 'update:visible', value: boolean): void
}
withDefaults(defineProps<IProps>(), {
  visible: false
})
const emit = defineEmits<IEmit>()
const formEl = ref<FormInstance>()
const appStore = useAppStore()
const active = ref('account')
const loading = ref(false)
interface FormState {
  account: string
  password: string
  email: string
  code: string
  key: string
}
const formState = ref<FormState>({
  account: 'admin',
  password: 'abcd.1234',
  email: 'test001@gmail.com',
  code: '937662',
  key: ''
})

/**
 * 登录事件
 */
const handleSubmit = () => {
  const data =
    active.value === 'account'
      ? omit(formState.value, 'email', 'code')
      : omit(formState.value, 'account', 'password', 'key')
  loading.value = true
  appStore.signInAction(data).finally(() => (loading.value = false))
}
// 弹窗关闭
const handleClose = () => {
  emit('update:visible', false)
  formEl.value?.resetFields()
}
// 弹窗确认
const handleConfirm = () => {
  formEl.value?.validate().then(() => {
    loading.value = true
    emit('update:visible', false)
    // update_pwd({
    //   ...state.value
    // })
    //   .then(() => {
    //     ToastUtils.success('修改成功')
    //     handleClose()
    //     emit('update:visible', false)
    //   })
    //   .finally(() => (loading.value = false))
  })
}
// 打开弹窗
const handleAdjustOpen = () => {}
</script>

<style lang="scss">
.login-form {
  @apply text-[12px] rounded-[12px] bg-white;

  .tips-text {
    @apply flex justify-center items-center text-[12px] text-[#999];
  }

  &__title {
    @apply flex items-center justify-between m-0 text-[20px] pb-[16px] font-semibold;
  }

  &__forget {
    @apply flex items-center justify-end w-full;
  }

  .el-form-item {
    .el-form-item__label {
      color: #2b2b2d;
      margin: 0 0 4px !important;
    }

    .el-input__wrapper {
      padding: 0 12px;
      border-radius: 8px;

      // box-shadow: 0 1px #e7e7e7;

      &:hover,
      &.is-focus {
        // box-shadow: 0 1px var(--el-input-focus-border-color);
      }
    }
  }

  &__submit {
    @apply w-full  rounded-[4px];

    background: #1562fc;
    box-shadow: 2px 2px 16px 0 rgba(21, 98, 252, 0.5);
  }
}
</style>
